<template>
    <div @mouseleave="close">
        <!-- 打卡记录 -->
        <div class="recordBox">
            <el-collapse>
                <!-- 待办事项 -->
                <el-collapse-item>
                    <template slot="title">
                        <i class="el-icon-notebook-1"></i><span>待办事项</span>
                    </template>
                    <el-table :data="scheduleData" style="width: 100%">
                        <el-table-column prop="grade" label="等级">
                        </el-table-column>
                        <el-table-column prop="event" label="事件"> </el-table-column>
                        <el-table-column prop="gap" label="距离时间"> </el-table-column>
                    </el-table>
                </el-collapse-item>
                <!--记账日报  -->
                <el-collapse-item>
                    <template slot="title">
                        <i class="el-icon-collection"></i><span>记账日报</span>
                    </template>
                    <!-- 个人记账本 -->
                    <div>
                        <el-collapse-item title="个人记账本">
                            <!-- <div>
                                <el-button type="text" @click="dialogTableVisibleA = true">收入</el-button>
                                <el-dialog title="收入记账本" :visible.sync="dialogTableVisibleA">
                                    <el-table :data="priIncomeData">
                                        <el-table-column property="priIncomeTime" label="日期"></el-table-column>
                                        <el-table-column property="priIncomeType" label="类别"></el-table-column>
                                        <el-table-column property="priIncomePrices" label="收入"></el-table-column>
                                    </el-table>
                                </el-dialog>
                            </div> -->
                            <div>
                                <el-button type="text" @click="dialogTableVisibleB = true">支出</el-button>
                                <el-dialog title="支出记账本" :visible.sync="dialogTableVisibleB">
                                    <el-table :data="priPayData">
                                        <el-table-column property="priPayTime" label="日期"></el-table-column>
                                        <el-table-column property="priPayType" label="类别"></el-table-column>
                                        <el-table-column property="priPayPrices" label="支出"></el-table-column>
                                    </el-table>
                                </el-dialog>
                            </div>
                        </el-collapse-item>
                    </div>
                    <!-- 家庭记账本 -->
                    <div>
                        <el-collapse-item title="家庭记账本">
                            <div>
                                <el-button type="text" @click="dialogTableVisibleC = true">收入</el-button>
                                <el-dialog title="收入记账本" :visible.sync="dialogTableVisibleC">
                                    <el-table :data="pubIncomeData">
                                        <el-table-column property="pubIncomeTime" label="日期"></el-table-column>
                                        <el-table-column property="pubIncomeName" label="姓名"></el-table-column>
                                        <el-table-column property="pubIncomeType" label="类别"></el-table-column>
                                        <el-table-column property="pubIncomePrices" label="收入"></el-table-column>
                                    </el-table>
                                </el-dialog>
                            </div>
                            <div>
                                <el-button type="text" @click="dialogTableVisibleD = true">支出</el-button>
                                <el-dialog title="支出记账本" :visible.sync="dialogTableVisibleD">
                                    <el-table :data="pubPayData">
                                        <el-table-column property="pubPayTime" label="日期"></el-table-column>
                                        <el-table-column property="pubPayName" label="姓名"></el-table-column>
                                        <el-table-column property="pubPayType" label="类别"></el-table-column>
                                        <el-table-column property="pubPayPrices" label="支出"></el-table-column>
                                    </el-table>
                                </el-dialog>
                            </div>
                        </el-collapse-item>
                    </div>
                </el-collapse-item>
                <!-- 本周菜谱 -->
                <el-collapse-item>
                    <template slot="title">
                        <i class="el-icon-food"></i><span>本周菜谱</span>
                    </template>
                    <div>
                        <el-button type="text" @click="dialogTableVisibleE = true">每周推荐</el-button>
                        <el-dialog title="每周推荐" :visible.sync="dialogTableVisibleE">
                            <el-table :data="foodData">
                                <el-table-column property="assort" label="分类"></el-table-column>
                                <el-table-column property="breakfast" label="早餐"></el-table-column>
                                <el-table-column property="lunch" label="午餐"></el-table-column>
                                <el-table-column property="tea" label="下午茶"></el-table-column>
                                <el-table-column property="dinner" label="晚餐"></el-table-column>
                            </el-table>
                        </el-dialog>
                    </div>
                    <div>
                        <el-button type="text" @click="dialogTableVisibleF = true">营养餐</el-button>
                        <el-dialog title="营养餐" :visible.sync="dialogTableVisibleF">
                            <el-table :data="nutritionData">
                                <el-table-column property="assort" label="类别"></el-table-column>
                                <el-table-column property="menu" label="菜品名称"></el-table-column>
                                <el-table-column property="nutrition" label="营养价值"></el-table-column>
                                <el-table-column property="material" label="材料"></el-table-column>
                                <el-table-column property="practice" label="做法" width="200"></el-table-column>
                            </el-table>
                        </el-dialog>
                    </div>
                    <div>
                        <el-button type="text" @click="dialogTableVisibleG = true">减脂餐</el-button>
                        <el-dialog title="减脂餐" :visible.sync="dialogTableVisibleG">
                            <el-table :data="lostFatData">
                                <el-table-column property="assort" label="类别"></el-table-column>
                                <el-table-column property="menu" label="菜品名称"></el-table-column>
                                <el-table-column property="fat" label="脂肪"></el-table-column>
                                <el-table-column property="material" label="材料"></el-table-column>
                                <el-table-column property="practice" label="做法" width="200"></el-table-column>
                            </el-table>
                        </el-dialog>
                    </div>
                </el-collapse-item>
                <!-- 运动记录 -->
                <el-collapse-item>
                    <template slot="title">
                        <i class="el-icon-baseball"></i><span>运动记录</span>
                    </template>
                    <div>
                        <el-button type="text" @click="dialogTableVisibleH = true">体重记录</el-button>
                        <el-dialog title="体重记录" :visible.sync="dialogTableVisibleH">
                            <el-table :data="noteData" style="width: 100%">
                                <el-table-column prop="name" label="姓名"> </el-table-column>
                                <el-table-column prop="age" label="年龄"> </el-table-column>
                                <el-table-column prop="height" label="身高/cm"> </el-table-column>
                                <el-table-column prop="weight" label="体重/kg" width="100">
                                </el-table-column>
                                <el-table-column prop="date" label="日期"> </el-table-column>
                                <el-table-column prop="note" label="备注"> </el-table-column>
                            </el-table>
                        </el-dialog>
                    </div>
                    <div>
                        <el-button type="text" @click="dialogTableVisibleI = true">运动记录</el-button>
                        <el-dialog title="身高记录" :visible.sync="dialogTableVisibleI">
                            <el-table :data="playData" style="width: 100%">
                                <el-table-column prop="name" label="姓名"> </el-table-column>
                                <el-table-column prop="age" label="年龄"> </el-table-column>
                                <el-table-column prop="anaerobic" label="无氧运动"> </el-table-column>
                                <el-table-column prop="aerobic" label="有氧运动"> </el-table-column>
                                <el-table-column prop="note" label="备注"> </el-table-column>
                                <el-table-column prop="date" label="日期"> </el-table-column>
                            </el-table>
                        </el-dialog>
                    </div>
                </el-collapse-item>
                <!-- 在线聊天 -->
                <el-collapse-item>
                    <template slot="title">
                        <i class="el-icon-chat-line-round"></i><span class="homeChatNotice">在线聊天</span>
                    </template>
                    <div>
                        <el-button class="btnColor" @click="path">进入聊天</el-button>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>
<script>
import axios from "axios";
export default {
    data() {
        return {
            dialogTableVisibleA: false,
            dialogTableVisibleB: false,
            dialogTableVisibleC: false,
            dialogTableVisibleD: false,
            dialogTableVisibleE: false,
            dialogTableVisibleF: false,
            dialogTableVisibleG: false,
            dialogTableVisibleH: false,
            dialogTableVisibleI: false,
            msg: [],
            index: 0,
            str: "",
            checked: true,
            scheduleData: [],//待办事项
            foodData: [],//菜谱数据
            nutritionData: [],//营养菜谱
            lostFatData: [],//减脂餐
            // tableData: [{ date: "2016-05-02", event: "吃饭" }],//打卡记录
            pubIncomeData: [],//家庭收入
            noteData: [],//体重记录
            playData: [],//运动记录
            pubPayData: [
            ],//公共支出
            priPayData: [],//私人支出
            user:[],
            talkId: -1,
        };
    },
    mounted() {
        //待办事项
        axios({
            url: 'dbdata/notepad'
        }).then(({ data }) => {
            data.forEach((v, i) => {
                    this.nowdata(v.date);
                    v.distance = this.days;
                    if (this.days < 5) {
                        v.level = "即将发生"
                    } else {
                        v.level = "正在准备"
                    }
                    this.scheduleData.push({
                        grade:v.level,event:v.content,gap:v.distance
                    })
                })
        })
        axios({
            url: '/dbdata/person-account',
        }).then(({ data }) => {
            for (let i = 0; i < data.length; i++) {
                let arrTime = data[i].time.split("T");//截取时间的T并转化为字符串，并赋值给arrTime
                if (arrTime.length >= 2) {//判断新赋值的长度
                    data[i].time = arrTime[1].split(".");
                    data[i].time = arrTime[0] + " " + data[i].time[0];
                }
                this.priPayData.push({
                    priPayTime: data[i].time,
                    priPayType: data[i].category,
                    priPayPrices: data[i].price,
                })
            }
        })
        //家庭支出
        axios({
            url: "dbdata/family-account",
        }).then(({ data }) => {
            // data.forEach((v) => {
            //     this.pubPayData.push({
            //         pubPayTime: v.time,
            //         pubPayName: v.name,
            //         pubPayType: v.category,
            //         pubPayPrices: v.price,
            //     });
            // });
            for (let i = 0; i < data.length; i++) {
                let arrTime = data[i].time.split("T");//截取时间的T并转化为字符串，并赋值给arrTime
                if (arrTime.length >= 2) {//判断新赋值的长度
                    data[i].time = arrTime[1].split(".");
                    data[i].time = arrTime[0] + " " + data[i].time[0];
                }
                this.pubPayData.push({
                    pubPayTime: data[i].time,
                    pubPayName: data[i].name,
                    pubPayType: data[i].category,
                    pubPayPrices: data[i].price,
                })
            }
        });
        //家庭收入
        axios({
            url: "dbdata/income1"
        }).then(({ data }) => {
            let sum = 0;

            for (let i = 0; i < data.length; i++) {
                let arrTime = data[i].time.split("T");//截取时间的T并转化为字符串，并赋值给arrTime

                if (arrTime.length >= 2) {//判断新赋值的长度
                    data[i].time = arrTime[1].split(".");
                    data[i].time = arrTime[0] + " " + data[i].time[0];
                }
                this.pubIncomeData.push({
                    pubIncomeTime: data[i].time,
                    pubIncomeName: data[i].name,
                    pubIncomeType: data[i].category,
                    pubIncomePrices: data[i].money,
                })
            }

        })
        //每周推荐
        axios({
            url: "dbdata/glptableData",
        }).then(({ data }) => {
            data.forEach((v) => {
                this.foodData.push({
                    assort: v.date,
                    breakfast: v.morn,
                    lunch: v.noon,
                    tea: v.Tues,
                    dinner: v.Turs,
                });
            });
        });
        //营养餐
        axios({
            url: "dbdata/glptableData1"
        }).then(({ data }) => {
            data.forEach((v) => {
                this.nutritionData.push({ assort: v.type, menu: v.name, nutrition: v.val, material: v.material, practice: v.way })
            })
        })
        //减脂餐
        axios({
            url: "dbdata/glptableData2"
        }).then(({ data }) => {
            data.forEach((v) => {
                this.lostFatData.push({ assort: v.type, menu: v.name, fat: v.val, material: v.material, practice: v.way })
            })
        })
        //体重记录
        axios({
            url: "/dbdata/keedaka"
        }).then(({ data }) => {
            data.forEach((v) => {
                this.noteData.push({ name: v.name, age: v.age, height: v.height, weight: v.weight, date: v.tim, note: v.benzhu })
            })
        })
        //运动记录
        axios({
            url: "/dbdata/keeweight"
        }).then(({ data }) => {
            data.forEach((v) => {
                this.playData.push({
                    name: v.name, age: v.age, anaerobic: v.wuyang, aerobic: v.youyang, note: v.rest, date: v.tim
                })
            })
        })
    },
    //新增
    props: ["massageCountOffline1"],
    methods: {
        path() {
            this.talkId = sessionStorage.getItem("userId");
            window.location.href = "/happyhome/home/FriendChata";
            axios.patch("/dbdata/userTalk/" + this.talkId + "", {
                massageCount: this.massageCountOffline1,
            });
            this.changBack();
        },
        changBack() {
            document.querySelector(".homeChatNotice").innerText = "在线聊天";
            document.querySelector(".homeChatNotice").style.color = "black";
        },
        close() {
            let n1 = document.querySelectorAll(".el-collapse-item__header");
            n1.forEach((v) => {
                if (v.classList.contains("is-active")) {
                    v.click();
                }
            });
        },
        nowdata(date111) {
            let nowDate = new Date()
            let date2 = {
                year: nowDate.getFullYear(),
                month: nowDate.getMonth() + 1,
                date: nowDate.getDate()
            }
            this.systemTime = date2.year + '-' + date2.month + '-' + date2.date
            let date1Str = date111.split("-");
            let date1Obj = new Date(date1Str[0], (date1Str[1] - 1), date1Str[2]);
            let date2Str = this.systemTime.split("-");
            let date2Obj = new Date(date2Str[0], (date2Str[1] - 1), date2Str[2]);
            let t1 = date1Obj.getTime();
            let t2 = date2Obj.getTime();
            let dateTime = 1000 * 60 * 60 * 24;//每一天的毫秒数
            let minusDays = Math.floor(((t2 - t1) / dateTime));//计算出两个日期的天数差
            this.days = Math.abs(minusDays);//取绝对值
        },
    },
};
</script>
<style scoped lang="less">
.recordBox {
    width: 260px;
    border-radius: 10px;
    margin-left: 10px;

    i {
        font-size: 25px;
        font-weight: 500;
        margin-left: 8px;
        margin-right: 8px;
    }

    .btnColor {
    width: 100px;
    background-color: rgb(255, 233, 192);
    color: rgba(00, 00, 00, 0.8);
    border-color: rgb(255, 233, 192);

    &:hover {
        background-color: rgba(255, 233, 192, 0.8);
        color: rgba(00, 00, 00, 0.5);
        border-color: rgba(255, 233, 192, 0.8);
    }
}
}


</style>
